<template>
  <div class="login">
    <div class="title">
      <span>登录</span>
    </div>
    <div class="content">
      <div class="fileInput">
        <h3>手机号</h3>
        <div class="ipt">
          <input type="text" placeholder="请输入手机号" v-model="phone" />
          <!-- <i class="iconfont iconshanchuguanbicha"></i> -->
        </div>
      </div>
      <div class="fileInput">
        <h3>密码</h3>
        <div class="ipt">
          <input :type="type" placeholder="请输入密码" v-model="password" />
          <span>
            <i class="iconfont iconyanjing" v-if="show" @click="changType('open')"></i>
            <i class="iconfont iconbiyan" v-else @click="changType('close')"></i>
          </span>
        </div>
      </div>
    </div>
    <p class="noAccount">
      <span>还没有此账号?</span>
      <span @click="goRegister">去注册</span>
    </p>
    <div class="btn">
      <button class="confirm" :style="{background:colors}"  @click="goIndex">确定</button>
    </div>
    <div style="font-size:0.3rem">
        <div class="first">
            <div class="type_tit">
                <span class="line"></span>
                <span>快速登陆</span>
                <span class="line"></span>
            </div>
            <div class="type_con" >
                <img src="../assets/realname/wxloge.png" @click="wxlog">
            </div>
        </div>
        <!-- <span @click="wxlog">wx登录</span> -->
        <!-- <span @click="wxout">退出登陆</span> -->
    </div>
   
    <div class="radio">
      <van-checkbox v-model="checked" checked-color="#38A83F"></van-checkbox>
      <span>
        我已阅读并同意
        <span class="serve" @click="agreement">服务协议</span>和
        <span class="serve" @click="policy">隐私政策</span>
      </span>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
    name: "login",
    data() {
        return {
            show: false,
            type: "password",
            checked: true,
            phone: "",
            password: "",
            colors: "#38A83F",
            openid:"",
        };
    },
    watch: {
        phone(val) {
            if (val) {
                this.phone = val;
            }
        },
        deep: true,
        // password(val) {
        //     if (val) {
        //         this.colors = "#38A83F";
        //     }else {
        //         this.colors = "#38A83F";
        //     }
        // }
    },
    // crearesd(){
    //     this.$axios.post("/login",{
    //         openId:'o80aMjnsg2EM13Ki8G1NcTpb1Iyw'
    //     }).then(res =>{
    //         console.log("哈哈哈哈",res)
    //     })
    // },
    mounted() {
        var ss = JSON.parse(localStorage.getItem("key"));
        if(ss != null){
            this.$router.push('/index')
        }
         // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
        
    },
    destroyed(){
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods: {
        changType(val) {
        this.show = !this.show;
        if (val == "open") {
            this.type = "password";
        } else {
            this.type = "text";
        }
        },
        goRegister() {
        this.$router.push("/register");
        },
        //微信登陆
        wxlog(){
            // this.$utils.authLogout()
            // localStorage.clear();
            this.$utils.wxlog(this);
              // 微信授权登录对象
            //   Toast("微信登录")

        },
        //取出微信用户登陆信息
        wxlocalStorage(){
            let list = JSON.parse(localStorage.getItem("wxprame"));
            this.openid = list.openid;
            this.$axios.post("/login", {
                openId:this.openid
            }).then(res =>{
                if (res.data.code == 301){
                    this.$router.push("/wxLoge");
                    return false;
                }
                if(res.data.code == 0){
                    this.$store.commit('changeToken',res.data.data.token);
                    localStorage.setItem('key',JSON.stringify(res.data.data));
                    this.$router.push("/index");
                    return false;
                }

            })
        },
        //微信退出
        // wxout(){
        //     this.$utils.authLogout()
        //     localStorage.setItem('wxprame','');
        // },
        goIndex() {
            // this.$router.push('/index')
        if (this.phone == "") {
            Toast("请输入手机号");
            return false;
        } else if (this.password == "") {
            Toast("请输入密码");
            return false;
        } else {
            this.$axios.post("/login", {
                username: this.phone,
                password: this.password,
                rememberMe: false
            })
            .then(res => {
                // console.log(res)
                if (res.data.code == 0) {
                    this.$store.commit('changeToken',res.data.data.token);
                    localStorage.setItem('key',JSON.stringify(res.data.data));
                    // Toast(res.data.msg);
                    this.$router.push('/index')
                } 
                else {
                Toast(res.data.msg);
                }
            });
        }
        },
        goBack(){
            mui.init({
                keyEventBind: {
                backbutton: true, //关闭back按键监听
                }
            })
            //首页返回键处理
            // 处理逻辑： 1s内，连续两次按返回键，则退出应用；
            var first = null;
            mui.back = function(){
                // 首次按键， 提示 再按一次退出应用
                if(!first){
                first = new Date().getTime();//记录第一次按下回退键的时间
                mui.toast("再按一次退出应用");
                //   history.go(-1); // 回退到上一页
                setTimeout(function(){
                    //1s 后清除
                    first = null;
                }, 1000);

                }else{
                if(new Date().getTime() - first < 1000){
                    //如果两次按下的时间小于1s
                    plus.runtime.quit(); //那么就退出app
                }
                }
            }
                
        },
        agreement(){
        this.$router.push({path:"/TermsOfService",query:{type:"40",value:"服务协议"}})
        },
        policy(){
        this.$router.push({path:"/TermsOfService",query:{type:"30",value:"隐私政策"}})
        },
        login() {}
    }
};
</script>

<style lang="less" scoped>
.login {
    width: 100%;
    height: 100%;
    font-size: 0;
    .title {
        display: flex;
        justify-content: center;
        font-size: 0.36rem;
        color: #333;
        height: 1.27rem;
        background-color: #fff;
        align-items: center;
        font-weight: bold;
    }
    .content {
        padding: 0.3rem;
        box-sizing: border-box;
        margin-top: 1.7rem;
        .fileInput {
        border-bottom: 1px solid #c4c2c2;
        margin-bottom: 0.4rem;
        h3 {
            font-size: 0.36rem;
            color: #333;
        }
        .ipt {
            padding: 0.3rem 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            input {
            font-size: 0.3rem;
            color: #999;
            background-color: transparent;
            border-left: 2px solid #1dbe61;
            text-indent: 0.1rem;
            width: 94%;
            height: 100%;
            //  border:1px solid red;
            &::placeholder {
                font-size: 0.28rem;
                color: #999;
            }
            }
        }
        span {
            margin-left: 0.1rem;
        }
        i {
            font-size: 0.28rem;
        }
        }
    }
    .noAccount {
        font-size: 0.28rem;
        color: #666;
        padding-left: 0.3rem;
        box-sizing: border-box;
        span:nth-child(2) {
        color: #38a83f;
        }
    }
    .btn {
        text-align: center;
    }
    .confirm {
        width: 4.8rem;
        height: 0.8rem;
        background: #999;
        border-radius: 0.3rem;
        color: #fff;
        font-size: 0.36rem;
        line-height: 0.8rem;
        margin: 0 auto;
        text-align: center;
        margin-top: 1.5rem;
        border-radius: 0.4rem;
    }
        .first{
            width: 100%;
            padding:0.5rem 0;
            box-sizing: border-box;
            .type_tit{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .line{
                    display: inline-block;
                    width: 40%;
                    height: 1px;
                    background-color: rgba(100,100,100,0.3);
                }
            }
            .type_con{
                width: 100%;
                height: 0.7rem;
                text-align: center;
                margin-top: 0.5rem;
                img{
                    width: 0.7rem;
                    height: 0.7rem;
                    
                }
            }
        }    
    .radio {
        font-size: 0.26rem;
        color: #666;
        display: flex;
        justify-content: center;
        // margin-top: 1rem;
        vertical-align: center;
        .van-checkbox {
        transform: scale(0.7);
        }
        .serve {
        color: #38a83f;
        }
        span {
        margin-top: 0.02rem;
        }
    }
}
</style>
